<template>
	<view class="layout">
		<cu-custom bgColor="bg-white">
			<block slot="content">首页</block>
		</cu-custom>
		<!-- <u-loading-page :loading="true" loading-text="loading..." v-if="showLoading"></u-loading-page> -->
		<!-- 主页 -->
		<view>
			<view class="viewbox" style="background-color: #fff;"></view>

			<view class="nav">
				<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
					<swiper-item v-for="item in 4">
						<image src="../../static/icon3.png" mode=""></image>
					</swiper-item>
				</swiper>
			</view>

			<view class="informationbx">
				<view class="welcomebox-avatar">
					<image :src="avatar_logo"></image>
				</view>
				<view class="information">
					<view class="name">事实上</view>
					<view class="phone">19908038803</view>
				</view>
			</view>

			<!-- 搜索 -->
			<view class="index_a">
				<view class="header_wrap">
					<view class="header_wrap_b">
						<input placeholder="项目名字关键字搜索" @input="searchGoods" v-model="keyword"
							placeholder-style="font-size: 24rpx;font-family: PingFang SC;font-weight: 500;color: #BBBBBB;" />
					</view>
				</view>
			</view>
			
			<!-- 状态类 -->
			<u-sticky :offset-top="CustomBar">
				<view class="order_list_a">
					<view class="order_list_a_a" @click="order_click(0)" :class="current==0?'order_list_a_aa':''">
						全部
						<view v-if="current==0" class="order_list_a_a_a"></view>
					</view>
					
					<view class="order_list_a_a" @click="order_click(2)" :class="current==2?'order_list_a_aa':''">
						待上传
						<view v-if="current==2" class="order_list_a_a_a"></view>
					</view>
					<view class="order_list_a_a" @click="order_click(3)" :class="current==3?'order_list_a_aa':''">
						待审核
						<view v-if="current==3" class="order_list_a_a_a"></view>
					</view>
					<view class="order_list_a_a" @click="order_click(4)" :class="current==4?'order_list_a_aa':''">
						已通过
						<view v-if="current==4" class="order_list_a_a_a"></view>
					</view>
					<view class="order_list_a_a" @click="order_click(5)" :class="current==5?'order_list_a_aa':''">
						已驳回
						<view v-if="current==5" class="order_list_a_a_a"></view>
					</view>
				</view>
			</u-sticky>








			<!-- 底部的没搜到时 -->
			<loading-footer :status="status" :slot-empty="true">
				<view slot="empty" class="column-center" style="padding-top: 200rpx">
					<image class="img-null" src="/static/goods_null.png"></image>
					<text class="lighter">暂无记录</text>
				</view>
			</loading-footer>




		</view>
	</view>
</template>

<script>
	import api from '../../common/apiService';
	import request from '../../common/request';
	import {
		loadingType,
		trottle
	} from "@/utils/type";



	export default {
		data() {
			return {
				showLoading: true,
				isLogin: true,
				cname: '',
				CustomBarh:0,
				current:0,
				result: '',
				keyword: "",
				avatar_logo: request.baseUrl + 'img/avatar.png',
			}
		},
		onLoad: function(options) {
			this.current =options.current?options.current:0;
		},
		onShow(){
			this.uid=uni.getStorageSync('uid');
			this.CustomBarh=this.CustomBar;
		},
		mounted() {
			const mid = uni.getStorageSync('mid');
			const cname = uni.getStorageSync('name')
			this.cname = cname
			console.log("name值", cname)

			console.log("mid是", mid)
		},

		methods: {
			navigate(url, type = 0) {
				if (!this.isLogin && type === 1) {
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/auth/wxrole'
						})
					}, 100)
					return;
				}
				uni.navigateTo({
					url
				});
			},
			goToWxLogin() {
				uni.navigateTo({
					url: '/pages/auth/wxrole'
				});
			},
			order_click(index) {
				this.current = index;
				this.onRefresh();
			},
			async searchGoods() {
				const paramsList = {
					keyword: this.keyword,
				};
				const optsList = {
					url: "g-search",
					method: "get",
				};
				trottle(() => {
					request.httpRequest(optsList, paramsList).then((res) => {
						if (res.data.code === 200) {
							this.goodsList = res.data.data.list;
						}
					});
				}, 2000)();
			},


		}
	}
</script>

<style scoped lang="scss">
	.layout {
		height: 100vh;
		padding-bottom: 30rpx;
		background: #f6f7fb;

		.nav {
			width: 705rpx;
			margin: 90rpx 24rpx 0 21rpx;
			border-radius: 30rpx;
			// border: 1px solid red;
			// padding: 30rpx 0;

			swiper {
				width: 705rpx;
				height: 320rpx;
				border-radius: 30rpx;

				swiper-item {
					width: 100%;
					height: 100%;
					border-radius: 30rpx;

					image {
						width: 100%;
						height: 100%;
						border-radius: 10rpx;
					}
				}
			}
		}


		.informationbx {
			width: 705rpx;
			height: 100rpx;
			margin: 50rpx 20rpx 0 20rpx;
			// border: 1px solid #ffffff;
			border-radius: 30rpx;
			position: absolute;
			background: rgba(255, 255, 255, 1);
			// box-sizing: border-box;
			// padding: 100rpx 0 0 200rpx;
			// color: #ffffff;
			font-size: 35rpx;
			display: flex;

			.welcomebox-avatar {
				width: 57rpx;
				height: 57rpx;
				line-height: 57rpx;
				border-radius: 50%;
				// border: 2rpx solid red;
				// float: right;
				margin: 20rpx 0 0 44rpx;
				// position: absolute;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.information {
				width: 200rpx;
				height: 80rpx;
				// border: 1px solid red;
				margin: 10rpx 0 0 20rpx;

				.name {
					width: 190rpx;
					height: 39rpx;
					line-height: 39rpx;
					// border: 1px solid red;
					font-family: Alibaba PuHuiTi 2.0;
					color: #000000;
					font-size: 30rpx;
					font-weight: normal;
				}

				.phone {
					width: 190rpx;
					height: 39rpx;
					line-height: 39rpx;
					// border: 1px solid red;
					color: #000000;
					font-family: Alibaba PuHuiTi 2.0;
					font-size: 27rpx;
					font-weight: normal;
				}
			}
		}

		.index_a {
			background: #f6f7fb;
			height: auto;
			width: 750rpx;
			overflow: hidden;
			padding: 25rpx;
			margin-top: 150rpx;

			.header_wrap {
				width: 100%;
				height: 72rpx;
				// border: 1rpx solid #D9D9D9;
				border-radius: 34rpx;
				background: #ffffff;

				.header_wrap_b {
					width: 480rpx;
					height: 68rpx;
					float: left;
					margin-left: 20rpx;

					input {
						width: 480rpx;
						height: 68rpx;
						line-height: 68rpx;
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #000000;

						// padding: 0 30rpx 0 20rpx;
					}
				}
			}
		}
		
		.order_list_a{
			height: 90rpx;
			line-height: 90rpx;
			width: 750rpx;
			background-color: #fff;
		}
		.order_list_a_a{
			width: 20%;
			float: left;
			height: 90rpx;
			line-height: 90rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #222222;
			position: relative;
			text-align: center;
		}
		.order_list_a_aa{
			color:#5fd4f5;
		}
		.order_list_a_a_a{
			position: absolute;
			height: 8rpx;
			bottom:5rpx;
			background-color:#5fd4f5;
			width:100rpx;
			left: 50%;
			margin-left: -50rpx;
		}



	}
</style>